<style lang="less" scoped>
.main-wrap {
  height: 100vh;
	background: url("../assets/bg.jpeg");
	background-size: cover;
}
.box
{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width:400px;
	padding: 40px;
	box-sizing: border-box;
	box-shadow: 0 15px 25px rgba(0,0,0,.5);
	border-radius: 10px;
}
.box h2
{
	margin:0 0 30px;
	padding: 0;
	color: #fff;
	text-align: center;
}
.box .input-box
{
	position: relative;
}
.box .input-box input
{
	width:100%;
	padding: 10px 0;
	font-size: 16px;
	color: #fff;
	letter-spacing: 1px;
	margin-bottom: 30px;
	border: none;
	border-bottom: 1px solid #fff;
	outline: none;
	background: transparent;
}
.box .input-box label
{
	position: absolute;
	top:0;
	left: 0;
	padding: 10px 0;
	letter-spacing: 1px;
	font-size: 16px;
	color: #fff;
	pointer-events: none;
	transition: .5s;
}
.box .input-box input:focus ~ label,
.box .input-box input:valid ~ label
{
	top:-18px;
	left:0;
	font-size: 12px;
}
.box input[type="button"]
{
	background: transparent;
	border: none;
	outline:none;
	color: #fff;
	background: #03a9f4;
	padding: 10px 20px;
	cursor:pointer;
	border-radius: 5px;
}
.a-btn {
  float: right;
  color: #fff;
  cursor: pointer;
}
</style>
<template>
  <div class="main-wrap">
    <div class="box">
      <h2>{{type}}</h2>
      <div>
        <div class="input-box">
          <input type="text" required v-model="model.name"/>
          <label>Username</label>
        </div>
        <div class="input-box">
          <input type="password" required v-model="model.password"/>
          <label>password</label>
        </div>
        <input type="button" :value="btnText" @click="type=='Login'?onLogin():onRegist()"/>
        <!-- <a class="a-btn" @click="toggleType()">{{aText}}</a> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      type: 'Login',
      model: {
        name: '',
        password: ''
      }
    }
  },
  computed: {
    btnText () {
      return this.type === 'Login' ? 'submit' : 'regist';
    },
    aText () {
      return this.type === 'Login' ? 'regist one' : 'go login';
    },
  },
  methods: {
    toggleType () {
      if (this.type === 'Login') {
        this.type = 'Regist';
      } else {
        this.type = 'Login';
      }
    },
    onLogin () {
      this.axios.post('/user/login', this.model, { hideLoading: true }).then(() => {
        this.$router.replace({
          name: 'user'
        })
      }).catch(err => {
        this.$message({
          message: err.message,
          type: 'error'
        });
      })
    },
    onRegist () {
      if (!this.model.name || !this.model.password) {
         this.$message({
            message: '请输入用户名密码',
            type: 'warning'
          });
        return
      }
      this.axios.post('/user/create', this.model, { hideLoading: true }).then(res => {
        if (res.data.return) {
          this.$message({
            message: '登录成功',
            type: 'success'
          });
        }
      })
    },
  }
}
</script>
